<template>
  <div>
    <el-row gutter="40">
      <el-col :span="6" v-for="(item) in items" :key="item">
        <el-card :body-style="{ padding: '0px' }" >
<!--          <el-image   :src="item.video_img"  @click="linkToVideo(item)"></el-image>-->
          <div style="padding: 5px; text-align: left">
            <span style="font-weight: 700;font-size: x-large" @click="linkToTopic(item)">{{item.topic_title}}</span><br>
            <el-tag size="mini">   <i class="el-icon-user"></i>{{ item.topic_uid }}</el-tag>
            <!--            <div>-->
            <!--              <el-badge value="new" class="item">-->
            <!--                <el-button size="small">评论</el-button>-->
            <!--              </el-badge>-->
            <!--              <el-badge value="hot" class="item">-->
            <!--                <el-button size="small">回复</el-button>-->
            <!--              </el-badge>-->
            <!--            </div>-->
            <div class="time">
              <i class="el-icon-time"></i> {{ item.topic_timestamp }}
            </div>
            <div class="time">
<!--              <i class="el-icon-view"></i> {{ item.video_vv }}-->
              <i class="el-icon-thumb"></i> {{ item.topic_like }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="margin-top: 30px;">
      <el-pagination
          background
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserTopicList",
  data() {
    return {
      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,

      pageNum: 1,
      pageSize: 1,
      pageTotal: 1,
      total: 1,
      topic_title: '',
      topic_uid: "",


      // 弹窗
      createDialogVisible: false,
      updateDialogVisible: false,


      form: {
        topic_tid: '',
        topic_title: '',
        topic_uid: this.$root.sessionId,
        topic_maintext: '',
      },

      items: [],

      rules: {
        topic_title: [
          {required: true, message: '请输入文章标题', trigger: 'blur'},
          {
            pattern: /^((?!fuck|sb|nb|傻).)*$/,    //正则校验不用字符串
            message: "包含敏感词", trigger: "blur"
          }
        ],
        topic_maintext: [
          {required: true, message: '请输入文章正文', trigger: 'blur'},
        ]
      },

    };
  },
  methods: {
    searchTopic: function (pageNum,topic_title,topic_uid) {
      var that = this;


      this.$http.get("http://" + that.ip + ":" + that.port + "/topic/main?pageNum=" + pageNum + "&topic_title=" + topic_title + "&topic_uid=" + topic_uid)
          .then(function (response) {
            console.log(response.data.list);
            that.items = response.data.list;
            that.total = response.data.total;
            that.pageNum = response.data.pageNum;
            that.pageSize = response.data.pageSize;
            that.pageTotal = response.data.pageTotal;
          })
          .catch(function (err) {
            console.log(err);
          });

    },

    linkToTopic(item) {
      this.$router.push({path:'/index/PageTopic',query:{item:item,items:this.items}});
    },

    deleteTopic: function (id) {
      var that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$http.get("http://"+that.ip+":"+that.port+"/topic/delete/" + id)
            .then(function (response) {
              console.log(response)
              that.searchTopic(that.pageNum,that.topic_title,that.topic_uid);
            }).catch(function (err) {
          console.log(err)
        });

        this.$message({
          type: 'success',
          message: '删除成功!'
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchTopic(val, this.topic_title, this.topic_uid);
    },


    creatTopic() {
      var that = this;
      if (this.form.topic_title == '' ||  this.form.topic_maintext ==''||!this.isSensitiveWord(this.form.topic_title)) {
        that.$message.error(
            '投稿失败,请检查后再次提交');
      } else {
        this.$http.post("http://" + that.ip + ":" + that.port + "/topic/create", that.form)
            .then(function (response) {
              console.log(response);
              that.$message({
                message: "投稿成功",
                type: 'success'
              });
              that.searchTopic(that.pageNum, that.topic_title, that.topic_uid);
              that.createDialogVisible = false;
              that.form.topic_title = '';
              that.form.topic_maintext = '';
            }).catch(function (err) {
          console.log(err);
          that.$message.error(
              '投稿失败');
        });
      }
    },

    updateDialogOpen(topic_tid, topic_title, topic_maintext) {
      this.form.topic_tid = topic_tid;
      this.form.topic_title = topic_title;
      this.form.topic_maintext = topic_maintext;
      this.updateDialogVisible = true;

    },

    cancelBtn() {
      this.updateDialogVisible = false;
      this.createDialogVisible = false;
      this.form.topic_title = '';
      this.form.topic_maintext = '';
    },

    updateTopic() {
      var that = this;
      if (this.form.topic_title == '' || this.form.topic_maintext ==''||!this.isSensitiveWord(this.form.topic_title)) {
        that.$message.error(
            '投稿失败,请检查后再次提交');
      } else {
        this.$http.post("http://" + that.ip + ":" + that.port + "/topic/doEdit", that.form)
            .then(function (response) {
              console.log(response);
              that.$message({
                message: "投稿成功",
                type: 'success'
              });
              that.searchTopic(that.pageNum, that.topic_title, that.topic_uid);
              that.createDialogVisible = false;
              that.form.topic_tid = '';
              that.form.topic_title = '';
              that.form.topic_maintext = '';
            }).catch(function (err) {
          console.log(err);
          that.$message.error(
              '投稿失败');
        });
      }
    },


//敏感词验证
    isSensitiveWord(str) {
      const reg_str = /^((?!fuck|sb|nb|傻).)*$/;
      return reg_str.test(str);
    },

  },
  created() {
    this.searchTopic(1,'','');
  },
}
</script>

<style scoped>

</style>